<template>
    <div>

        <el-card style="width: 100%; height: 70vh;">


            <!--          订单信息    标题-->
            <div slot="header" class="clearfix">
                <div style="font-weight: bold;font-size: 18px">订单信息</div>

                <el-radio-group v-model="searchStatusStr" @change="searchByPayStatus">
                    <el-radio-button
                            v-for="item in payStatuss"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                    ></el-radio-button>
                </el-radio-group>

            </div>


            <template>
                <el-table height="330"
                          :header-cell-style="{fontSize: '14px','text-align':'center'}"
                          :cell-style="{'text-align':'center'}"
                          :data="orders"
                          border
                          stripe
                          style="width: 100%">
                    <el-table-column width="50" label="序号" type="index" align="center"
                    ></el-table-column>
                    <el-table-column prop="number" label="订单号" show-overflow-tooltip
                                     width="300px"></el-table-column>

                    <el-table-column prop="payment" label="订单金额" show-overflow-tooltip
                    ></el-table-column>

                    <el-table-column prop="createTime" label="下单时间" show-overflow-tooltip
                                     width="200px"
                    ></el-table-column>

                    <!--                    <el-table-column label="订单状态">
                                            <template slot-scope="scope">
                                                <el-tag type="danger" v-if="scope.row.status===0">已取消</el-tag>
                                                <el-tag type="success" v-if="scope.row.status===1">未付款</el-tag>
                                                <el-tag v-if="scope.row.status===2">已付款</el-tag>
                                                <el-tag type="warning" v-if="scope.row.status===3">待发货</el-tag>
                                                <el-tag type="success" effect="dark" v-if="scope.row.status===4">已发货</el-tag>
                                                <el-tag type="warning" v-if="scope.row.status===5">待签收</el-tag>
                                                <el-tag type="success" effect="dark" v-if="scope.row.status===6">已签收</el-tag>
                                                <el-tag type="info" v-if="scope.row.status===7">未评价</el-tag>
                                                <el-tag type="success" effect="dark" v-if="scope.row.status===8">已评价</el-tag>
                                            </template>
                                        </el-table-column>-->

                    <el-table-column label="支付状态">
                        <template slot-scope="scope">
                            <el-tag type="warning" v-if="scope.row.payStatus===0">未支付</el-tag>
                            <el-tag type="success" effect="dark" v-if="scope.row.payStatus===1">已支付</el-tag>
                        </template>
                    </el-table-column>


                    <el-table-column label="操作">

                        <template slot-scope="scope">

                            <el-button v-if="scope.row.payStatus===0"
                                       icon="el-icon-delete"
                                       @click="handleDeleteButton(scope.row)">取消
                            </el-button>

                            <el-button v-if="scope.row.payStatus===0"
                                       type="success"
                                       plain
                                       style="margin:5px"
                                       @click="handlePayButton(scope.row)">去 支 付
                            </el-button>

                            <router-link
                                    :to="{ path: '/orderInfo',  query: { id: scope.row.id } }">
                                <el-button v-if="scope.row.payStatus===1" icon="el-icon-search">查看</el-button>
                            </router-link>


                            <el-dialog
                                    title="购买提示"
                                    :visible.sync="dialogVisible_Pay"
                                    width="30%"
                            >
                                <span>您是否通过支付宝支付完成该订单呢？</span>
                                <span slot="footer" class="dialog-footer">
                                    <el-button @click="dialogVisible_Pay = false">取 消</el-button>
                                    <el-button type="primary" @click="loadOrders">确 定</el-button>
                                </span>
                            </el-dialog>

                        </template>
                    </el-table-column>
                </el-table>

            </template>

            <el-pagination
                    style="float: right;margin: 20px 0"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-sizes="pageSizes"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next"
                    background
                    :total="total">
            </el-pagination>
        </el-card>

    </div>
</template>
<script>
import {defineComponent} from 'vue'

export default defineComponent({
    name: "MyOrders",
    data() {
        return {
            account: {},
            userId: '',
            searchStatusStr: '全部',
            searchStatus: -1,

            orders: [],

            // 支付状态：0未支付；1已支付
            payStatuss: [{             // 存储所有状态
                value: -1,
                label: '全部'
            }, {             // 存储支付状态
                value: 0,
                label: '未支付'
            }, {
                value: 1,
                label: '已支付'
            }],

            dialogVisible_Pay: false,

            currentPage: 1,          // 当前页码
            pageSizes: [5, 10, 50, 100], // 每页显示条数
            pageSize: 5,             // 每页显示条数
            total: 0,                // 订单总数


        }
    },
    mounted() {
        // 获取用户ID
        this.account = JSON.parse(localStorage.getItem('account'))
        this.userId = this.account.id

        // 加载订单信息
        this.loadOrders()

    },
    methods: {

        loadOrders() {
            this.$request.post('/orders/getOrdersByUserId?currentPage=' + this.currentPage
                + '&pageSize=' + this.pageSize
                + '&userId=' + this.userId).then(res => {
                if (res.code === '200') {
                    this.orders = res.data.list
                    this.total = res.data.total
                    // console.log(this.orders)
                } else {
                    this.$message.error(res.msg)
                }
            })
            this.dialogVisible_Pay = false
        },
        // currentPage 改变时会触发
        handleCurrentChange(val) {
            // 获取  当前页 和 页面大小  currentPage、pageSize
            this.currentPage = val;

            // 发送请求获取相应数量的数据
            this.loadOrders()
        },

        //  pageSize 改变时会触发
        handleSizeChange(val) {
            // 获取  当前页 和 页面大小  currentPage、pageSize
            this.pageSize = val;
            this.currentPage = 1;

            // 发送请求获取相应数量的数据
            this.loadOrders()
        },

        handleDeleteButton(order) {
            this.orderId = order.id
            // 删除订单
            this.$request.delete('/orders/deleteById/' + this.orderId).then(res => {
                if (res.code === '200') {
                    this.$message.success('取消订单成功！')
                    this.loadOrders()
                } else {
                    this.$message.error(res.msg)
                }
            })
        },

        handlePayButton(order) {
            // const url = `http://localhost:9090/alipay/pay?subject=${'并州电子数码'}&traceNo=${order.number}&totalAmount=${order.payment}`
            const url = this.$baseUrl + `/alipay/pay?subject=${'并州电子数码'}&traceNo=${order.number}&totalAmount=${order.payment}`
            window.open(url, '_blank')
            this.dialogVisible_Pay = true
        },

        searchByPayStatus() {

            for (let i = 0; i < this.payStatuss.length; i++) {
                if (this.payStatuss[i].label === this.searchStatusStr) {
                    this.searchStatus = this.payStatuss[i].value
                    break
                }
            }

            if (this.searchStatus === -1 || this.searchStatus === '-1') {
                this.loadOrders()
            } else {
                this.$request.post('/orders/searchByPayStatusAndUserId?currentPage=' + this.currentPage
                    + '&pageSize=' + this.pageSize
                    + '&payStatus=' + this.searchStatus
                    + '&userId=' + this.userId).then(res => {
                    // console.log(res)
                    if (res.code === '200') {
                        this.orders = res.data.list
                        this.total = res.data.total
                    } else {
                        this.$message.error(res.msg)
                    }
                })
            }

            // 处理状态信息
            // console.log(this.searchStatus)
            // console.log(this.searchStatusStr)

        }
    }
})
</script>


<style scoped>

</style>